<template>
	<view class="container">
		<!-- <u-navbar autoBack title="" bgColor="transparent" leftIconColor="#26282b" titleStyle="#fff" leftIconSize="46rpx"
			placeholder>
		</u-navbar> -->
		<FeNavbar :title="scrollTop > 45 ? '编辑信息' : '' " />
		<scroll-view class="scroll-view" scroll-y="true" @scroll="onScroll">
			<view class="page-title">编辑信息</view>
			<view class="power-list">
				<view class="power-item" @click="handleItemEvent({action:'edit_avatar'})">
					<view class="row-title" style="flex: 1;">头像</view>
					<view class="user-avatar">
						<image
							:src="userInfo.avatarUrl && userInfo.avatarUrl != 'url_to_default_avatar_image' ? userInfo.avatarUrl : '/static/mine/avatar.png'"
							mode="aspectFill"></image>
					</view>
					<image class="row-arrow" src="/static/mine/row-right.png" mode="aspectFill"></image>
				</view>
				<view class="power-item" @click="handleItemEvent({action:'edit_nickname'})">
					<view class="row-title">用户名</view>
					<view class="row-right-content van_ellipsis">{{userInfo.userName || "还未设置用户名称"}}</view>
					<image class="row-arrow" src="/static/mine/row-right.png" mode="aspectFill"></image>
				</view>
				<view class="power-item" @click="handleItemEvent({action:'edit_psw'})">
					<view class="row-title">修改密码</view>
					<view class="row-right-content van_ellipsis"></view>
					<image class="row-arrow" src="/static/mine/row-right.png" mode="aspectFill"></image>
				</view>
				<!-- <view class="power-item" @click="handleItemEvent({action:'edit_phone_number'})">
				<view class="row-title">修改绑定手机号</view>
				<view class="row-right-content van_ellipsis"></view>
				<image class="row-arrow" src="/static/mine/row-right.png" mode="aspectFill"></image>
			</view> -->
				<view class="power-item" @click="handleItemEvent({action:'edit_email'})">
					<view class="row-title">邮箱</view>
					<view class="row-right-content van_ellipsis">{{userInfo.email}}</view>
					<image class="row-arrow" src="/static/mine/row-right.png" mode="aspectFill"></image>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		requestPermission
	} from "@/util/permision.js"
	import {
		updateAvatar
	} from "@/api/user.js"
	export default {
		data() {
			return {
				userInfo: getApp().globalData.userInfo,
				scrollTop: 0
			};
		},
		onShow() {
			this.userInfo = {
				...this.userInfo,
				userName: getApp().globalData.userInfo.userName
			};
		},
		methods: {
			handleItemEvent(vals) {
				const {
					action,
					index
				} = vals;
				switch (action) {
					case "edit_avatar": // 修改头像
						this.handleChooseImage();
						break;
					case "edit_nickname": // 修改用户名
						this.toPages("/pages/tabbar/mine/editNickname");
						break;
					case "edit_psw": // 修改密码
						this.toPages("/pages/tabbar/mine/editPassword");
						break;
					case "edit_email": // 修改邮箱
						this.toPages("/pages/tabbar/mine/editEmail");
						break;
				}
			},

			async handleChooseImage() {
				const _requestPermission = await requestPermission("photoLibrary")
				if (_requestPermission != 1) return

				const _cameraPermission = await requestPermission('camera')
				if (_cameraPermission != 1) return

				uni.chooseImage({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					success: async (res) => {
						uni.showLoading({
							title: "上传中...",
							mask: true
						})
						this.userInfo.avatarUrl = res.tempFilePaths[0];
						const result = await updateAvatar(res.tempFilePaths[0]);
						uni.showToast({
							title: "修改完成"
						})
					},
					fail: res => {
						console.log('fail***', res)
					}
				})
			},
			onScroll(val) {
				this.scrollTop = val.detail.scrollTop;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		overflow: hidden;

		.scroll-view {
			height: 100%;
			flex: 1;
		}

		.page-title {
			font-size: 50rpx;
			font-weight: 600;
			color: #26282B;
			line-height: 60rpx;
			padding: 32rpx 0 24rpx 32rpx;
		}

		.power-list {
			padding: 0 32rpx;

			.power-item {
				flex: 1;
				height: 120rpx;
				line-height: 120rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #DBE0E6;

				.row-title {
					font-size: 30rpx;
					font-weight: 600;
					color: #26282B;
				}

				.row-right-content {
					flex: 1;
					text-align: right;
					margin-right: 20rpx;
					color: #A6ACB4;
					font-size: 28rpx;
				}

				.user-avatar {
					width: 88rpx;
					height: 88rpx;
					border-radius: 50%;
					border: 1px solid #DBE0E6;
					margin-right: 20rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.row-arrow {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
	}
</style>